<div class="col-md-9">
    <!-- The time line -->
    <ul class="timeline">
        <li>
            <i class="fa fa-fw fa-genderless bg-red"></i>

            <div class="timeline-item">

                <h3 class="timeline-header no-border">商品名字:{{commodity.commodityName}}
                </h3>
            </div>
        </li>
        <li>
            <i class="fa fa-fw fa-book bg-aqua"></i>

            <div class="timeline-item">

                <h3 class="timeline-header no-border">商品价格:{{commodity.commodityPrice}}
                </h3>
            </div>
        </li>
        <!-- END timeline item -->
        <!-- timeline item -->
        <li>
            <i class="fa fa-user bg-purple"></i>

            <div class="timeline-item">

                <h3 class="timeline-header"><a href="#">商品详情:</a></h3>

                <div class="timeline-body">
                    <!--<div class="col-md-9">-->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title"></h3>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                    </button>
                                </div>

                            </div>
                            <!-- /.box-tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body no-padding">
                            <div class="table-responsive mailbox-messages">
                               {{commodity.commodityDetail}}
                                <!-- /.table -->
                            </div>
                            <!-- /.mail-box-messages -->
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <ul class="pagination pagination-sm no-margin pull-right">
                                <li><a href="#">&laquo;</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- /. box -->
                </div>
            </div>
        </li>

    </ul>

    <div class="container">
        <div class="page-header">
        <div class="input-group spinner">
            <!--<input type="text" class="form-control" value="42">-->
            <!--<div class="input-group-btn-vertical">-->
                <!--<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>-->
                <!--<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>-->
            <!--</div>-->
            <h3>选择数量:</h3></div>
            <button class="numbtn1 btn-default"  ng-click="decrease()">-</button>
            <input type="text" ng-model="selectednum" readonly>
            <button class="numbtn2 btn-default"  ng-click="add()">+</button>
            <p ng-model="totalprice">总价格：{{selectednum*commodity.commodityPrice}}元</p>
            <div class="col-md-3"><button type="button" class="btn btn-block btn-primary" ng-click="buy()">购买</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-block btn-success" ui-sref="index">添加购物车</button></div>
        </div>
    </div>

</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- /.nav-tabs-custom -->
</div>
<style>
.spinner {
width: 300px;
}
.spinner input {
text-align: right;
}

.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
position: absolute;
top: 0;
left: 4px;
}
</style>

<!--<script>-->
    <!--(function ($) {-->
        <!--$('.spinner .btn:first-of-type').on('click', function() {-->
            <!--$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);-->
        <!--});-->
        <!--$('.spinner .btn:last-of-type').on('click', function() {-->
            <!--$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);-->
        <!--});-->
    <!--})(jQuery);-->
<!--</script>-->